﻿<!DOCTYPE html>
<html>
  <head>
    <title>色彩 Color Swatches</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=1440, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link href="resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet"/>
    <link href="resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
    <link href="data/styles.css" type="text/css" rel="stylesheet"/>
    <link href="files/___color_swatches/styles.css" type="text/css" rel="stylesheet"/>
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" type="text/css" rel="stylesheet"/>
    <script src="resources/scripts/jquery-1.7.1.min.js"></script>
    <script src="resources/scripts/jquery-ui-1.8.10.custom.min.js"></script>
    <script src="resources/scripts/prototypePre.js"></script>
    <script src="data/document.js"></script>
    <script src="resources/scripts/prototypePost.js"></script>
    <script src="files/___color_swatches/data.js"></script>
    <script type="text/javascript">
      $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };
      $axure.utils.getOtherPath = function() { return 'resources/Other.html'; };
      $axure.utils.getReloadPath = function() { return 'resources/reload.html'; };
    </script>
  </head>
  <body>
    <div id="base" class="">

      <!-- Unnamed (元件标题) -->

      <!-- 背景 (Dynamic Panel) -->
      <div id="u615" class="ax_default" data-label="背景">
        <div id="u615_state0" class="panel_state" data-label="State1" style="">
          <div id="u615_state0_content" class="panel_state_content">
          </div>
        </div>
      </div>

      <!-- 线条 (Dynamic Panel) -->
      <div id="u616" class="ax_default" data-label="线条">
        <div id="u616_state0" class="panel_state" data-label="State1" style="">
          <div id="u616_state0_content" class="panel_state_content">
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u617" class="ax_default _默认样式">
        <div id="u617_div" class=""></div>
        <div id="u617_text" class="text ">
          <p><span style="font-family:'FontAwesome Bold', 'FontAwesome Regular', 'FontAwesome';"></span><span style="font-family:'微软雅黑 Bold', '微软雅黑';"> 元件标题</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u618" class="ax_default _默认样式">
        <div id="u618_div" class=""></div>
        <div id="u618_text" class="text ">
          <p><span style="font-family:'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;"> </span><span style="font-family:'FontAwesome';font-weight:400;">作品首页</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u619" class="ax_default _默认样式">
        <div id="u619_div" class=""></div>
        <div id="u619_text" class="text ">
          <p><span>#0079FE</span></p><p><span>主要颜色</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u620" class="ax_default _默认样式">
        <div id="u620_div" class=""></div>
        <div id="u620_text" class="text ">
          <p><span>#4BD863</span></p><p><span>辅助颜色</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u621" class="ax_default _默认样式">
        <div id="u621_div" class=""></div>
        <div id="u621_text" class="text ">
          <p><span style="font-family:'微软雅黑 Regular', '微软雅黑';font-weight:400;">#FF3B30</span></p><p><span style="font-family:'微软雅黑';font-weight:400;">辅助颜色</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u622" class="ax_default _默认样式">
        <div id="u622_div" class=""></div>
        <div id="u622_text" class="text ">
          <p><span style="font-family:'微软雅黑 Regular', '微软雅黑';font-weight:400;">#FE9400</span></p><p><span style="font-family:'微软雅黑';font-weight:400;">辅助颜色</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u623" class="ax_default _默认样式">
        <div id="u623_div" class=""></div>
        <div id="u623_text" class="text ">
          <p><span>#333333</span></p><p><span>字体用色</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u624" class="ax_default _默认样式">
        <div id="u624_div" class=""></div>
        <div id="u624_text" class="text ">
          <p><span>#666666</span></p><p><span>字体用色</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u625" class="ax_default _默认样式">
        <div id="u625_div" class=""></div>
        <div id="u625_text" class="text ">
          <p><span style="font-family:'微软雅黑 Regular', '微软雅黑';font-weight:400;">#CCCCCC</span></p><p><span style="font-family:'微软雅黑';font-weight:400;">字体用色</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u626" class="ax_default _默认样式">
        <div id="u626_div" class=""></div>
        <div id="u626_text" class="text ">
          <p><span style="font-family:'微软雅黑 Regular', '微软雅黑';font-weight:400;">#999999</span></p><p><span style="font-family:'微软雅黑';font-weight:400;">字体用色</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u627" class="ax_default _默认样式">
        <div id="u627_div" class=""></div>
        <div id="u627_text" class="text ">
          <p><span>#3399ff</span></p><p><span>辅助颜色</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u628" class="ax_default _默认样式">
        <div id="u628_div" class=""></div>
        <div id="u628_text" class="text ">
          <p><span>#464c5b</span></p><p><span>辅助颜色</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u629" class="ax_default _默认样式">
        <div id="u629_div" class=""></div>
        <div id="u629_text" class="text ">
          <p><span style="font-family:'微软雅黑 Regular', '微软雅黑';font-weight:400;">#2db7f5</span></p><p><span style="font-family:'微软雅黑';font-weight:400;">辅助颜色</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u630" class="ax_default _默认样式">
        <div id="u630_div" class=""></div>
        <div id="u630_text" class="text ">
          <p><span style="font-family:'微软雅黑 Regular', '微软雅黑';font-weight:400;">#F95E5A</span></p><p><span style="font-family:'微软雅黑';font-weight:400;">辅助颜色</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u631" class="ax_default _默认样式">
        <div id="u631_div" class=""></div>
        <div id="u631_text" class="text ">
          <p><span>#E4E4E4</span></p><p><span>边框用色</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u632" class="ax_default _默认样式">
        <div id="u632_div" class=""></div>
        <div id="u632_text" class="text ">
          <p><span>#E9E9E9</span></p><p><span>边框用色</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u633" class="ax_default _默认样式">
        <div id="u633_div" class=""></div>
        <div id="u633_text" class="text ">
          <p><span>#F5F5F5</span></p><p><span>背景用色</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u634" class="ax_default _默认样式">
        <div id="u634_div" class=""></div>
        <div id="u634_text" class="text ">
          <p><span>#F2F2F2</span></p><p><span>背景用色</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u635" class="ax_default" data-left="20" data-top="100" data-width="1100" data-height="110">

        <!-- Unnamed (Rectangle) -->
        <div id="u636" class="ax_default _默认样式">
          <div id="u636_div" class=""></div>
          <div id="u636_text" class="text ">
            <p style="font-size:14px;"><span style="font-family:'微软雅黑 Bold', '微软雅黑';font-weight:700;">使用说明</span></p><p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;">推荐使用以下调色板作为原型设计色彩规范，以保证页面和组件之间的视觉一致。建议使用较为安全的蓝色作为主色调，用作界面中核心元素及重要按纽的配色，相关非核心元素统一使用灰色色调。辅助用色是具有代表性的颜色，常用于信息提示，比如成功、警告和失败，中性色常用于文本、背景、边框、阴影等，可以体现出页面的层次结构。</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u637" class="ax_default _默认样式">
          <div id="u637_div" class=""></div>
          <div id="u637_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (版权信息) -->

      <!-- Unnamed (Rectangle) -->
      <div id="u639" class="ax_default _默认样式">
        <img id="u639_img" class="img " src="images/___icons/u605.png"/>
        <div id="u639_text" class="text ">
          <p><span>Copyright © </span><a id="u640" class="link"><span>http://t.cn/EPh287q</span></a><span>, All Rights Reserved.</span></p><p><span>打造高保真原型，快人一步</span></p>
        </div>
      </div>
    </div>
  </body>
</html>
